<template>
	<view class="apply-refund">
		<view class="goods bg-white m-t-20">
			<view class="flex">
				<u-image width="160rpx" @tap="previewImage(goodsDetail.image)" height="160rpx" border-radius="6rpx" lazy-load :src="goodsDetail.image" />
				<view class="goods-info">
					<view class="line-2">
						<router-link :to="{path:'/pages/goods_details/goods_details',query:{id:goodsDetail.goods_id}}">
							{{goodsDetail.goods_name}}
						</router-link>
					</view>
					<view class="xxs muted m-t-10">货号：{{goodsDetail.bar_code}}， 规格：{{goodsDetail.spec_value}}</view>
					<view class="xxs muted m-t-10" v-if="service_type == 2">预估回收价格： ￥{{goodsDetail.predict_recycle_price}}</view>
				</view>
			</view>
		</view>
		<view class="opt-box m-t-20 bg-white">
			<view class="address_info">
				<view class="refund-info flex col-top">
					<view class="label">邮寄地址</view>
					<view class="flex-1 flex p-l-10" style="width: 520rpx;">
						<view style="width: 380rpx; margin-right: 10rpx;">{{refund_address.address}},
						{{refund_address.contact}},
							{{refund_address.mobile}}</view>
							<button class="xxs copy-btn br60 p-l-20 p-r-20 flex-2" type="primary"  @tap="onCopy">复制</button>
					</view>
				</view>
				<view v-if="service_type == 1" class="refund-info flex row-between">
					<view class="lable">我的地址</view>
					<view class="flex">
						<view style="width: 520rpx;">
							<navigator hover-class="none" url="/bundle/pages/user_address/user_address?type=1">
								<view class="address flex bg-white">
									<view class="flex-1 m-r-20">
										<view class="black md" v-if="!myAddress.contact">设置收货地址</view>
										<view v-else>
											<text class="name md m-r-10">{{myAddress.contact}}</text>
											<text class="phone md">{{myAddress.telephone}}</text>
											<view class="area sm m-t-10 lighter">
												{{myAddress.province}} {{myAddress.city}} {{myAddress.district}} {{myAddress.address}}
											</view>
										</view>
									</view>
									<u-icon name="arrow-right"></u-icon>
								</view>
							</navigator>
						</view>
					</view>
				</view>
				<view v-if="service_type == 2" class="refund-info flex row-between">
					<view class="lable">收款账号</view>
					<view class="flex">
						<view style="width: 520rpx;">
							<navigator hover-class="none" :url="'/bundle/pages/user_pay/user_pay?type=3&service_type=2&item_id=' + goodsDetail.item_id">
								<view class="address flex bg-white">
									<view class="flex-1 m-r-20">
										<view class="black md" v-if="!myPayAccount.account">设置收款账号</view>
										<view v-else>
											<view style="display: flex; flex-direction: row;">
												<view style="width: 420rpx; display: flex; flex-direction: column; justify-content: center;">
													<text class="md m-r-10 m-t-10">支付宝账号：{{myPayAccount.account}}</text>
													<text class="md m-r-10 m-t-10">收款姓名：{{myPayAccount.real_name}}</text>
													<view v-if="myPayAccount.money_qr_code" class="m-t-10" style="display: flex; justify-content: flex-start;">
														收款码：
														<image style="width: 80rpx; height: 80rpx;" :src="myPayAccount.money_qr_code"></image>
													</view>
												</view>
											</view>
										</view>
									</view>
									<u-icon name="arrow-right"></u-icon>
								</view>
							</navigator>
						</view>
						
						
					</view>
				</view>
				<view class="refund-info flex col-top">
					<view class="label">备注说明</view>
					<view class="flex-1" style="background-color: #F8F8F8;">
						<u-input v-model="remark" type="textarea" placeholder="请描述申请售后的具体原因，100字以内" :border="false"
							:height="160" />
					</view>
				</view>
				<view class="upload bg-white">
					<view class="title flex row-between">
						<view>上传凭证</view>
						<view class="muted">（选填，最多可上传1张）</view>
					</view>
					<u-upload ref="uUpload" :show-progress="false" :header="{token: $store.getters.token}"
						:max-count="1" width="160" height="160" :action="action" upload-text="上传图片"
						@on-success="onSuccess" @on-remove="onRemove" />
				</view>
			</view>
		</view>
		<view class="fixed-bottom-button">
			<button class="btn br60" type="primary" size="lg" @tap="onSubmit">确认</button>
		</view>

		<u-select v-model="showPop" mode="single-column" value-name="index" label-name="name" :list="confirmReason"
			@confirm="confirmSelect"></u-select>
	</view>

</template>

<script>
	import {
		refundOptType
	} from "@/utils/type";
	import {
		baseURL
	} from '@/config/app';
	
	import {
		postGoodsService
	} from '@/api/store.js';

	import {
		getMyOrderGoodsDetail,
		// getGoodsInfo,
		// applyAfterSale,
		getDefaultAddress,
		applyAgain,
		getlastmethod,
		getuserpay
	} from "@/api/user";
	import {
		uploadFile,
		trottle,
		copy
	} from '@/utils/tools.js';

	export default {
		data() {
			return {
				action: baseURL + '/api/file/formimage',
				hiddenOpt: false,
				optTyle: refundOptType.ONLY_REFUND,
				goods: {},
				reason: [],
				refundReason:[],
				confirmReason:[],
				showPop: false,
				reasonString: '',
				reasonId:0,
				fileList: [],
				remark: "",
				service_type:0,
				goodsDetail: {
					type: Object,
					defaults: {
						item_id: 0
					}
				},
				refund_address: {
					type: Object,
					defaults: {}
				},
				myAddress: {},
				addressId: '',
				myPayAccount: {},
				user_pay_id:0
			};
		},
		onUnload() {
			uni.$off("selectaddress")
			uni.$off("selectuserpay")
		},
		onLoad(options) {
			uni.$on("selectaddress", (e) => {
				
				console.log('============uni.$on("selectaddress", (e) => {=============');
				console.log(e);
			    // this.addressId = e.id;
				this.addressId = e.item.id;
				this.myAddress = e.item;
			})
			uni.$on("selectuserpay", (e) => {
				console.log('============uni.$on("selectuserpay", (e) => {=============');
				console.log(e);
				this.user_pay_id = e.item.id;
				this.myPayAccount = e.item;
			})
			
			const {
				service_type,
				item_id
			} = this.$Route.query
			//service_type 1:清洗服务;2羽绒回收
			this.service_type = service_type;
			// console.log('========service_type==========');
			// console.log(service_type);
			let newTitle = '提交服务申请';
			if(service_type == 1){
				newTitle = '提交清洗服务申请';
			}else{
				newTitle = '提交羽绒回收申请';
			}
			uni.setNavigationBarTitle({  
				title: newTitle  
			});  
			this.itemId = item_id;
			this.getGoodsDetailFun();
			this.getDefaultAddressFun();
			this.onSubmit = trottle(this.onSubmit, 1000, this)
			this.getLast();
		},

		methods: {
			previewImage(current) {
				uni.previewImage({
				    current,
				    urls: [current] // 需要预览的图片http链接列表
				});
			},
			getLast() {
				getuserpay().then(res => {
					if (res.code == 1) {
						this.myPayAccount = res.data;
					}
				});
			},
			onCopy() {
				const {
					address,
					contact,
					mobile
				} = this.refund_address;
				copy(`${address},${contact},${mobile}`)
			},
			async getDefaultAddressFun() {
				const {
					data,
					code
				} = await getDefaultAddress({});
				if (code == 1) {
					this.myAddress = data;
					this.addressId = this.myAddress.id;
					console.log('=========console.log(this.myAddress);==========');
					console.log(this.myAddress);
				} else {
					this.myAddress = {};
				}
			},
			
			async getGoodsDetailFun() {
				const {
					data,
					code
				} = await getMyOrderGoodsDetail({
					item_id:this.itemId
				});
				if (code == 1) {
					if (data.count == 0) {
						this.$toast({
							title: "未获取商品信息"
						});
						setTimeout(() => {
							this.$Router.push('/bundle/pages/circulate/addgoods')
						}, 1500)
						return
					}
					this.goodsDetail = data.lists[0];
					this.refund_address = data.lists[0].shop.refund_address;
					console.log('=========console.log(this.goodsDetail);==========');
					console.log(this.goodsDetail);
				} else {
					this.goodsDetail = {};
					this.isNull = true
					this.isFirstLoading = false;
				}
			},
			confirmSelect(e) {
				this.reasonString = e[0].label
				this.reasonId = e[0].value
			},

			onlyRefund() {
				this.optTyle = refundOptType.ONLY_REFUND
				this.hiddenOpt = true
				this.confirmReason=this.refundReason
			},

			allRefunds() {
				this.optTyle = refundOptType.REFUNDS;
				this.hiddenOpt = true;
				this.confirmReason=this.reason;
			},
			onSuccess(e) {
				this.fileList.push(e.data.base_uri)
			},
			onRemove(index) {
				this.fileList.splice(index, 1)
				console.log(index)
			},
			async onSubmit() {
				console.log('onSubmit222222222-------');
				const {
					service_type,
					itemId,
					// optTyle,
					myPayAccount,
					remark,
					fileList,
					addressId
				} = this;
				if (service_type == 1 && !addressId) {
					return this.$toast({
						title: '请选择您的地址'
					});
				}
				if (service_type == 2 && !myPayAccount.id) {
					return this.$toast({
						title: '请选择您的收款信息'
					});
				}
				const params = {
					service_type: service_type,
					item_id: itemId,
					goods_num:1,
					user_pay_id:myPayAccount.id,
					user_pay_account:myPayAccount.account,
					user_address_id:addressId,
					remark: remark,
					images: fileList.length ? fileList[0] : ''
				};
				console.log(params);
				const {
					data,
					code,
					msg
				} = await postGoodsService(params)
				this.$toast({
					title: msg
				}, {
					tab: 1,
					url: '/pages/member/member'
				});
			},

			getGoodsInfoFun() {
				let {
					orderId,
					itemId
				} = this;
				getGoodsInfo({
					order_id: orderId,
					item_id: itemId
				}).then(res => {
					if (res.code == 1) {
						this.goods = res.data.goods;
						this.reason = res.data.reason.map((item, index) => ({
							name: item.value,
							index:item.key
						}));
						this.refundReason = res.data.refund_reason.map((item, index) => ({
							name: item.value,
							index:item.key
						}));
					}
				});
			}

		}
	};
</script>
<style lang="scss">
	.fixed-bottom-button{
		width: 100%;
		position: fixed;
		bottom: 60rpx;
	}
	.apply-refund {
		padding-bottom: 50rpx;

		.goods {
			padding: 20rpx 24rpx;

			.goods-info {
				margin-left: 24rpx;
				flex: 1;
			}
		}
	}

	.opt-box {
		.opt-item {
			padding: 20rpx 20rpx 30rpx;
		}
	}
	.apply-refund {
		.refund-info {
			padding: 24rpx 20rpx;
			border-bottom: $-solid-border;
			.label {
				width: 200rpx;
				margin-top: 19rpx;
			}
			.flex{
				padding-left: 20rpx
			}
			textarea {
				flex: 1;
				height: 172rpx;
				border-radius: 10rpx;
				padding: 20rpx;
				box-sizing: border-box;
			}
		}

		.upload {
			padding: 0 20rpx 30rpx;
			.title {
				padding: 24rpx 0;
			}
		}

		.btn {
			margin: 30rpx 26rpx
		}
	}
</style>
